<!--
 * @Author: zqg
 * @Date: 2021-01-10 23:12:18
 * @LastEditors: zqg
 * @LastEditTime: 2021-03-20 18:51:11
 * @Description: 新增/编辑考核规则-考核基本值内容
-->
<template>
  <el-form
    :model="addAppraisalQuery"
    :rules="rules"
    ref="formRef"
    label-width="100px"
    class="demo-ruleForm"
    label-position="right"
  >
    <div v-if="ruleType === assessmentTypeInfo.ordinary.type">
      <el-row>
        <el-col>考核基本值</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-form-item label-width="0">
        <el-col :span="12">
          <el-form-item
            label="考核值:"
            prop="assessValue"
          >
            <el-col :span="12">
              <el-select
                v-model="addAppraisalQuery.assessValue"
                placeholder="请选择考核值"
              >
                <el-option
                  v-for="item in assessmentTypeOption"
                  :key="item.id"
                  :label="item.value"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col
              :span="12"
              class="tip"
            >
              <el-popover
                v-show="assessValueTip"
                trigger="hover"
                width="200"
              >
                <div class="tip-text">
                  {{assessValueTip}}
                </div>
                <i
                  class="el-icon-question"
                  slot="reference"
                ></i>
              </el-popover>
            </el-col>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item label-width="0">
        <el-col :span="12">
          <el-form-item label="指标值:">
            <el-col :span="12">
              <el-select
                v-model="addAppraisalQuery.targetValue"
                placeholder="请选择指标值"
              >
                <el-option
                  v-for="item in parameterTypeOption"
                  :key="item.id"
                  :label="item.label"
                  :value="item.value"
                ></el-option>
              </el-select>
            </el-col>
            <el-col
              :span="12"
              class="tip"
            >
              <el-popover trigger="hover">
                <div class="tip-text">
                  这是提示文字描述
                </div>
                <i
                  class="el-icon-question"
                  slot="reference"
                ></i>
              </el-popover>
            </el-col>
          </el-form-item>
        </el-col>
      </el-form-item>
      <el-form-item>
        <div class="explain">
          说明：考核值/指标值*100 =
          达标率（达标率是作为条件判断的最终结果值，如果选择无，则达标值就是考核值本身）
        </div>
      </el-form-item>
    </div>
    <div v-if="ruleType === assessmentTypeInfo.accessories.type">
      <el-row>
        <el-col>配件信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-form-item label-width="0">
        <el-col :span="5">
          <el-form-item label="配件编号:">
            <span>{{
              addAppraisalQuery.chooseAccessoriesInfo
                ? addAppraisalQuery.chooseAccessoriesInfo.partsCode
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="配件名称:">
            <span>{{
              addAppraisalQuery.chooseAccessoriesInfo
                ? addAppraisalQuery.chooseAccessoriesInfo.partsName
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="配件类别:">
            <span>{{
              addAppraisalQuery.chooseAccessoriesInfo
                ? addAppraisalQuery.chooseAccessoriesInfo.partsDictValue
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="配件单位:">
            <span>{{
              addAppraisalQuery.chooseAccessoriesInfo
                ? addAppraisalQuery.chooseAccessoriesInfo.unit
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label-width="0"
            prop="chooseAccessoriesInfo"
          >
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="accessoriesCheck"
            >配件选择</el-button>
          </el-form-item>
        </el-col>
      </el-form-item>
    </div>
    <div v-if="ruleType === assessmentTypeInfo.project.type">
      <el-row>
        <el-col>项目信息</el-col>
      </el-row>
      <el-divider content-position="center"></el-divider>
      <el-form-item label-width="0">
        <el-col :span="5">
          <el-form-item label="项目名称:">
            <span>{{
              addAppraisalQuery.chooseProjectInfo
                ? addAppraisalQuery.chooseProjectInfo.projectName
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目类别:">
            <span>{{
              addAppraisalQuery.chooseProjectInfo
                ? addAppraisalQuery.chooseProjectInfo.projectDictValue
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目金额:">
            <span>{{
              addAppraisalQuery.chooseProjectInfo &&
              addAppraisalQuery.chooseProjectInfo.amount
                ? '¥' + addAppraisalQuery.chooseProjectInfo.amount
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="5">
          <el-form-item label="项目公时:">
            <span>{{
              addAppraisalQuery.chooseProjectInfo
                ? addAppraisalQuery.chooseProjectInfo.workHours
                : ''
            }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="4">
          <el-form-item
            label-width="0"
            prop="chooseProjectInfo"
          >
            <el-button
              icon="el-icon-plus"
              type="primary"
              @click="checkProject"
            >项目选择</el-button>
          </el-form-item>
        </el-col>
      </el-form-item>
    </div>
    <el-dialog
      v-if="projectVisible"
      title="项目选择"
      :visible.sync="projectVisible"
      :append-to-body="true"
      width="800px"
      @close="projectDialogClose"
      :before-close="projectHandleClose"
    >
      <SelectProject
        @getList="getSelectProject"
        :max="1"
      />
    </el-dialog>
    <el-dialog
      v-if="accessoriesVisible"
      title="配件选择"
      :visible.sync="accessoriesVisible"
      :append-to-body="true"
      width="1000px"
      @close="projectDialogClose"
      :before-close="projectHandleClose"
    >
      <SelectAccessories
        @partsList="getSelectAccessories"
        :max="1"
      />
    </el-dialog>
  </el-form>
</template>

<script>
import {
  performanceAssessmentTypes,
  assessmentTypeOption,
  parameterTypeOption
} from '@/utils/performance'
import { SelectProject } from '@/components/index'
import SelectAccessories from '@/components/SelectAccessories'
export default {
  components: {
    SelectProject,
    SelectAccessories
  },
  data() {
    return {
      addAppraisalQuery: {
        // 考核制值
        assessValue: '',
        // 指标值
        targetValue: '',
        // 选择的配件信息
        chooseAccessoriesInfo: null,
        // 选择的项目信息
        chooseProjectInfo: null
      },
      //项目选择弹窗
      projectVisible: false,
      //配件选择弹窗
      accessoriesVisible: false,
      // 考核类型
      assessmentTypeInfo: performanceAssessmentTypes,
      // 考核值类型选项列表
      assessmentTypeOption,
      // 指标值类型选项列表
      parameterTypeOption: [
        {
          id: '-1',
          value: '',
          label: '无'
        }
      ].concat(parameterTypeOption)
    }
  },
  props: {
    // 考核类型
    ruleType: {
      type: Number,
      default: 0
    },
    // 新增规则信息详情
    rulesDetail: {
      type: Object,
      default: () => ({})
    }
  },
  watch: {
    addAppraisalQuery: {
      handler(value) {
        this.$emit('change', value)
      },
      deep: true
    }
  },
  computed: {
    assessValueTip() {
      const itemList = this.assessmentTypeOption.filter(item =>
        item.value === this.addAppraisalQuery.assessValue
      )
      if (itemList.length) {
        return itemList[0].tip;
      }
      return '';
    },
    // 验证规则
    rules() {
      return {
        assessValue: [
          {
            required:
              this.ruleType ===
              this.assessmentTypeInfo.ordinary.type,
            message: '请选择考核制值'
          }
        ],
        // 选择的配件信息
        chooseAccessoriesInfo: [
          {
            required:
              this.ruleType ===
              this.assessmentTypeInfo.accessories.type,
            message: '请选择的配件'
          }
        ],
        chooseProjectInfo: [
          {
            required:
              this.ruleType ===
              this.assessmentTypeInfo.project.type,
            message: '请选择的项目'
          }
        ]
      }
    }
  },
  created() {
    Object.keys(this.addAppraisalQuery).forEach(key => {
      if (this.rulesDetail.hasOwnProperty(key) && this.rulesDetail[key]) {
        this.$set(this.addAppraisalQuery, key, this.rulesDetail[key])
      }
    })
  },
  methods: {
    clear() {
      this.addAppraisalQuery = {
        assessValue: '',
        targetValue: ''
      }
    },
    /**
     * @description: 选中项目/配件数据处理
     * @param {Number} 区分项目/配件类型
     * @param {Object[]} 项目/配件数据列表
     * @return {*}
     */
    filterList(type, list) {
      if (type === 1) {
        this.$set(this.addAppraisalQuery, 'chooseProjectInfo', list[0])
        this.$refs.formRef.clearValidate('chooseProjectInfo')
      } else {
        this.$set(this.addAppraisalQuery, 'chooseAccessoriesInfo', list[0])
        this.$refs.formRef.clearValidate('chooseAccessoriesInfo')
      }
      this.projectDialogClose()
    },
    /**
     * @description: 项目确认选择回调
     * @param {Object[]} 选中的项目
     * @return {*}
     */
    getSelectProject(list) {
      this.filterList(1, list)
    },
    /**
     * @description: 配件确认选择回调
     * @param {Object[]} 选中的配件
     * @return {*}
     */
    getSelectAccessories(list) {
      this.filterList(2, list)
    },
    /**
     * @description: 配件/项目选择弹窗关闭操作
     * @param {*}
     * @return {*}
     */
    projectHandleClose() {
      this.$confirm('确认关闭？')
        .then(_ => {
          this.projectDialogClose()
        })
        .catch(_ => { })
    },
    /**
     * @description: 配件/项目选择弹窗关闭处理
     * @param {*}
     * @return {*}
     */
    projectDialogClose() {
      this.projectVisible = false
      this.accessoriesVisible = false
    },
    /**
     * @description: 配件选择
     * @param {*}
     * @return {*}
     */
    accessoriesCheck() {
      this.accessoriesVisible = true
    },
    /**
     * @description: 项目选择
     * @param {*}
     * @return {*}
     */
    checkProject() {
      this.projectVisible = true
    },
    /**
     * @description: 表单验证
     * @return {Promise<Boolean>}
     */
    validate() {
      return new Promise(resolve => {
        this.$refs.formRef.validate(valid => {
          resolve(valid)
        })
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.explain {
  color: rgba(236, 0, 0, 100);
  font-size: 14px;
}
.tip {
  padding-left: 10px;
}
.tip-text {
  white-space: pre-line;
}
</style>
